<template>
  <div class="s-Customer">
    <div class="chat-content">
      <div class="head">
        <span>商家客服 (是否支持websocket：{{ isweb }}) (查询websocket：{{ isws }}) (建立连接：{{ islink }})</span>
        <button @click="close">关闭</button>
      </div>
      <div class="body" id="custList" ref="custList">
        <div class="item" :class="{ rightStyle: uid == d.uid }" v-for="d in Message.list">
          <!-- <img v-if="uid == d.uid" class="avatr" :src="userImg" alt="" /> -->
          <!-- <img v-else class="avatr" :src="OrtherImg" alt="" /> -->
          <img v-if="d.userName == '土豪'" class="avatr" :src="userImg" alt="" />
          <span v-else>{{ d.userName }}</span>
          <div class="mess">
            <p class="time">{{ d.time }}</p>
            <p class="text">{{ d.value }}</p>
            <img v-if="d.base64" class="valueImg" :src="d.base64" />
          </div>
        </div>
      </div>
      <div class="foot">
        <button type="button">图片</button>
        <input type="file" class="file" @change="fileChange" />
        <input type="" v-model="inp" @keyup.enter="btnSend()" />
        <button type="button" @click="btnSend">发送</button>
      </div>
    </div>
    <div class="preview" v-if="previewImg">
      <h6>图片预览</h6>
      <img :src="previewImg" class="yimg" />
    </div>
  </div>
</template>
<script setup>
import userImg from "@/assets/imgs/WebSocket/su.png";
import OrtherImg from "@/assets/imgs/WebSocket/liao.png";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted, inject, nextTick } from "vue";
const changeWebcoket = inject("changeWebcoket");
// 1、创建阶段
const isweb = ref("正在查询...");
const isws = ref("正在查询...");
const islink = ref("正在建立连接...");
if ("WebSocket" in window) isweb.value = "支持";
else isweb.value = "不支持";

// let ws = new WebSocket("ws://192.168.6.58:3000/");
// let ws = new WebSocket("ws://127.0.0.1:8091:3000/");

let ws = new WebSocket("ws://47.108.87.143:3000/");
if (ws) isws.value = "创建websokect服务成功";
else isws.value = "创建websokect服务失败";

ws.onopen = function (e) {
  islink.value = "已建立链接";
};

// 2、发送数据阶段
let Message = reactive({
  list: [],
});
let inp = ref("");
let base64 = "";
const uid = su.cook.getcookie("userid");
const previewImg = ref("");
const custList = ref(null);
const btnSend = () => {
  if (!inp.value && !previewImg.value) return;
  let newValue = JSON.stringify({
    avatr: userImg,
    userName: su.cook.getcookie("username"),
    value: inp.value,
    uid: uid,
    base64: base64,
    time: su.time.getTime(),
  });

  ws.send(newValue);
  inp.value = "";
  previewImg.value = "";
};

const fileChange = e => {
  let file = e.target.files[0];
  files(file);
};
const files = file => {
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    previewImg.value = e.target.result;
    base64 = e.target.result;
  };
};

//3、接收数据阶段
ws.onmessage = function (e) {
  const getValue = JSON.parse(e.data);
  Message.list.push(getValue);
  document.getElementById("custList").scrollTop = 0;

  let h = custList.value.scrollHeight;
  nextTick(() => {
    custList.value.scrollTo({
      top: h + 68,
    });
  });
};

// 4、关闭阶段
const close = () => {
  ws.close();
  changeWebcoket();
};
</script>
